<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>个人理财系统</title>
    <!-- 引入bootstrap样式 -->
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <!--图标库-->
    <link th:href="@{/lyear/css/materialdesignicons.min.css}" rel="stylesheet" type="text/css"/>
    <!--弹出框样式-->
    <link th:href="@{/lyear/jconfirm/jquery-confirm.min.css}" rel="stylesheet" type="text/css"/>
    <!--自定义样式-->
    <link href="../lyear/css/style.min.css" th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css"/>

</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="user/common/leftbar::#leftbaraside"></div>
        <!--头部信息-->
        <div id="msg">
            <div th:replace="user/common/topbar::#topbarheader"></div>
        </div>
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>基金理财推荐</h4>
                            </div>
                            <div th:if="${!fundProductList.isEmpty()}" class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover table-striped">
                                        <thead>
                                        <tr>
                                            <th class="info">序号</th>
                                            <th class="info">基金代码</th>
                                            <th class="info">基金简称</th>
                                            <th class="info">基金类型</th>
                                            <th class="info">日增长率</th>
                                            <th class="info">月增长率</th>
                                            <th class="info">年增长率</th>
                                            <th class="info">起投金额</th>
                                            <th class="info">投资期限</th>
                                            <th class="info">相关操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="fp:${fundProductList}">
                                            <td th:text="${fpStat.index+1}"></td>
                                            <td th:text="${fp.code}"></td>
                                            <td th:text="${fp.funddesc}"></td>
                                            <td th:if="${fp.type==1}" th:text="股票型基金"></td><td th:if="${fp.type==2}" th:text="债券型基金"></td>
                                            <td th:if="${fp.type==3}" th:text="货币型基金"></td><td th:if="${fp.type==4}" th:text="混合型基金"></td>
                                            <td th:text="${#numbers.formatDecimal(fp.dailygrowth*100,1,2)}+'%'"></td>
                                            <td th:text="${#numbers.formatDecimal(fp.monthlygrowth*100,1,2)}+'%'"></td>
                                            <td th:text="${#numbers.formatDecimal(fp.annualgrowth*100,1,2)}+'%'"></td>
                                            <td th:text="${#numbers.formatDecimal(fp.leastmoney,1,2)}+'元'"></td>
                                            <td th:text="${fp.investerm}"></td>
                                            <td>
                                                <button class="btn btn-primary btn-sm buy_btn"
                                                        th:attr="buyBtnId=${fp.id},invesmoney=${fp.leastmoney},buyBtnName=${fp.funddesc}">
															<span class="glyphicon glyphicon-usd"
                                                                  aria-hidden="true"></span> 投资
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div th:if="${fundProductList.isEmpty()}" class="card-body">
                                <div class="table-responsive">
                                    <h4>很抱歉！暂时还没有基金理财向您推荐</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--=========================================以下为修改内容================================================-->
                    <div class="modal fade" id="addModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">支付确认</h4>
                                </div>
                                <div class="modal-body">
                                    <!--要提交的表单 -->
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">支付密码：</label>
                                            <div class="col-sm-6">
                                                <input type="password" class="form-control"
                                                       id="paypassword" name="paypassword"

                                                       placeholder="请输入支付密码：">
                                                <span class="help-block"></span>
                                            </div>
                                            <!--                                            <div class="col-sm-6" v-if="toProfile">-->
                                            <!--                                                <span class="help-block" style="margin-left: 100px"><a-->
                                            <!--                                                        href="/user/personal/toProfile.html">点此去完善支付密码</a></span>-->
                                            <!--                                            </div>-->
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                            id="save_btn">提交
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="payModal" tabindex="-1"
                         role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">投入资金</h4>
                                </div>
                                <div class="modal-body">
                                    <!--要提交的表单 -->
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">投入资金：</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                       id="paymoney" name="paymoney"
                                                       placeholder="请输入要投入的资金：">
                                                <span class="help-block"></span>
                                            </div>

                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                            id="pay_btn">投资
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.min.js}"></script>
<!-- 引入jQuery和bootstrap的js -->
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<!--滚动条插件-->
<script th:src="@{/lyear/js/perfect-scrollbar.min.js}"></script>
<!--弹出框js-->
<script th:src="@{/lyear/jconfirm/jquery-confirm.min.js}"></script>
<!--自定义js脚本-->
<script th:src="@{/lyear/js/main.min.js}"></script>
<script th:inline="javascript">
    var save_btn_value = false;
    const _fundProductList = [[${fundProductList}]]
    fundProductList = eval(_fundProductList);
    console.log(fundProductList)
    var invesMoney = undefined;
    var havepwd = [[${session.loginUser.paypwd}]];

    $(document).on("click", ".buy_btn", function () {
        var fundProductId = $(this).attr("buyBtnId");
        var userId = [[${session.loginUser.id}]];
        invesMoney = $(this).attr("invesmoney");
        var name = $(this).attr("buyBtnName");

        if (havepwd!==null){
            let jc = $.confirm({
                title: '提示：',
                content: "确定买入 <strong>" + name + "</strong> 吗？",
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'btn-primary',
                        action: function () {
                            jc.close();
                            reset_form("#payModal form");
                            $("#payModal").modal({
                                //点击增加框背景不删除增加框
                                backdrop: "static"
                            });
                            $("#paymoney").blur(verifyPay);
                            $("#pay_btn").click(function () {
                                var paymoney = $("#paymoney").val()
                                if (verifyPay()) {
                                    $("#payModal").modal('hide');
                                    reset_form("#addModal form");
                                    $("#addModal").modal({
                                        //点击增加框背景不删除增加框
                                        backdrop: "static"
                                    });
                                    $("#paypassword").blur(verifyPaypwd);
                                    $("#save_btn").click(function () {
                                        if (verifyPaypwd()) {
                                            $.ajax({
                                                url: "/user/verifyPayPassword",
                                                type: "POST",
                                                data: {
                                                    "paypassword": $("#paypassword").val(),
                                                    "userId":userId,
                                                },
                                                beforeSend:function(){
                                                    $("#save_btn").attr("disabled","disabled");
                                                },
                                                success: function (result) {
                                                    if (result.code === 100) {
                                                        $.ajax({
                                                            url: "/user/buyFundProduct",
                                                            type: "POST",
                                                            data: {
                                                                "fundProductId": fundProductId,
                                                                "userId": userId,
                                                                "paymoney": paymoney,
                                                            },
                                                            success: function (result) {
                                                                if (result.code === 100) {
                                                                    $("#addModal").modal('hide');
                                                                    $("#save_btn")
                                                                        .attr("disabled", "disabled");
                                                                    $.alert('买入成功!');
                                                                } else {
                                                                    $.alert('买入失败!');
                                                                }
                                                            }
                                                        });
                                                    } else {
                                                            show_validate_msg("#paypassword", "error",
                                                                "密码错误");
                                                            $("#save_btn")
                                                                .attr("disabled", "disabled");
                                                    }
                                                }
                                            })
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消',
                        action: function () {
                            $.alert('已取消!');
                        }
                    }
                },
            });
        }else {
            $.alert("您还未设置支付密码\n即将跳转至完善密码。。。");
            setTimeout(function () {
                location.href="/user/personal/toProfile.html"
            }, 1500);
        }
    })


    function verifyPaypwd() {
        var paypwd = $("#paypassword").val();
        //匹配6位正整数
        var paypwdReg = /^\d{6}$/;
        if (paypwdReg.test(paypwd) === false) {
            show_validate_msg("#paypassword", "error", "我猜宁这交易密码不对呐");
            save_btn_value = false;
            return false;
        }else {
            show_validate_msg("#paypassword", "success", "");
            save_btn_value = true;
            $("#save_btn").removeAttr("disabled")
            return true;
        }

    }

    function verifyPay() {
        if(isNaN($("#paymoney").val())){
            show_validate_msg("#paymoney", "error", "请输入数字");
            pay_btn_value = false;
            return false;
        }else {
            if (!$("#paymoney").val()) {
                show_validate_msg("#paymoney", "error", "金额为空");
                pay_btn_value = false;
                return false;
            } else {
                if (($("#paymoney").val() - invesMoney) < 0) {
                    show_validate_msg("#paymoney", "error", "金额太少了哦。该产品最低起投为" + invesMoney + "元");
                    pay_btn_value = false;
                    return false;
                } else {
                    show_validate_msg("#paymoney", "success", "欢迎您的投资");
                    pay_btn_value = true;
                    return true;
                }
            }
        }
    }

    function reset_form(ele) {
        $(ele)[0].reset();
        //清空表单样式
        $(ele).find("*").removeClass("has-error has-success");
        $(ele).find(".help-block").text("");
    }

    function show_validate_msg(ele, status, msg) {
        //清除当前元素的校验状态
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" === status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" === status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }

    const msg = new Vue({
        el: "#msg",
        data: {
            msgNum: 0,
        },
        mounted: function () {
            axios({
                url: "/user/historyinfo/unread",
                method: "get",
            }).then((result)=>{
                if (result.data.code === 100) {
                    this.msgNum = result.data.extend.msgNum;
                }
            })
        }
    })
</script>
</body>
</html>
